<template>
  <div :class="$style.pdf" v-show="visible">
    <div @click="visible = false" :class="$style.iconContain">
<!--      <span :class="$style.iconClose" class="xiaoicon">&#xe759;</span>-->
      <el-button icon="el-icon-close" type="primary"></el-button>
    </div>
    <div id="preViewPdf"></div>
  </div>
</template>
<script>
import Pdfh5 from "pdfh5";
import "pdfh5/css/pdfh5.css";
export default {
  name: "pdfH5",
  data() {
    return {
      visible: false,
      pdfh5: null,
    };
  },
  methods: {
    openPdf(url) {
      this.visible = true;
      //实例化
      this.pdfh5 = new Pdfh5("#preViewPdf", {
        pdfurl: url,
      });
    },
  },
};
</script>

<style scoped module>
* {
  padding: 0;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.pdf {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  z-index: 200;
}
.iconContain {
  position: fixed;
  top: 0.426667rem;
  right: 0.426667rem;
  width: 0.64rem;
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 200;
  border-radius: 50%;
}
.iconClose {
  display: block;
  color: #fff;
}
</style>
